<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    @close="closeDialog"
    width="1100px"
  >
    <div v-for="item in list" class="ap-card">
      <div style="display: flex; padding-bottom: 0px">
        <div class="title col_18 no-border">增值税电子发票</div>
        <div class="extra col_6 no-border">
          <div>
            <span class="label title-label">发票代码</span>：<span
              class="content"
              >{{ item.code }}</span
            >
          </div>
          <div>
            <span class="label title-label">发票号码</span>：<span
              class="content"
              >{{ item.number }}</span
            >
          </div>
          <div>
            <span class="label title-label">开票日期</span>：<span
              class="content"
              >{{ item.date }}</span
            >
          </div>
          <div>
            <span class="label title-label">校验码</span>：<span
              class="content"
              >{{ item.checkCode }}</span
            >
          </div>
        </div>
      </div>
      <div class="div height84">
        <div class="col_1 no-border">购买方</div>
        <div class="col_15">
          <div>
            <span class="label">名称</span>：<span class="content">{{
              item.buyerName
            }}</span>
          </div>
          <div>
            <span class="label">纳税人识别号</span>：<span class="content">{{
              item.buyerTaxCode
            }}</span>
          </div>
          <div>
            <span class="label">地址及电话</span>：<span class="content">{{
              item.buyerAddressPhone
            }}</span>
          </div>
          <div>
            <span class="label">开户行及账号</span>：<span class="content">{{
              item.buyerBankAccount
            }}</span>
          </div>
        </div>
        <div class="col_1">密码区</div>
        <div
          class="col_6"
          style="
            border-top: 1px solid #b15b16;
            border-left: 1px solid #b15b16;
            border-bottom: 1px solid #b15b16;
          "
        ></div>
      </div>
      <div class="div">
        <div class="col_7 text-center" style="">货物或应税劳务、服务名称</div>
        <div class="col_5">
          <div class="text-center">规格型号</div>
        </div>
        <div class="col_2">
          <div class="text-center">单位</div>
        </div>
        <div class="col_2">
          <div class="text-center">数量</div>
        </div>
        <div class="col_2">
          <div class="text-center">单价</div>
        </div>
        <div class="col_3">
          <div class="text-center">金额</div>
        </div>
        <div class="col_2">
          <div class="text-center">税率</div>
        </div>
        <div class="col_3 no-border" style="border-right: 0px solid red">
          <div class="text-center">税额</div>
        </div>
      </div>
      <div v-for="itm in item.items">
        <div class="div">
          <div class="col_7 text-center" style="">{{ itm.name }}</div>
          <div class="col_5">
            <div class="text-center">{{ itm.quantity }}</div>
          </div>
          <div class="col_2">
            <div class="text-center">{{ itm.unit }}</div>
          </div>
          <div class="col_2">
            <div class="text-center">{{ itm.spec }}</div>
          </div>
          <div class="col_2">
            <div class="text-center">{{ itm.unitPrice }}</div>
          </div>
          <div class="col_3">
            <div class="text-center">{{ itm.amountWithoutTax }}</div>
          </div>
          <div class="col_2">
            <div class="text-center">{{ itm.taxRate }}</div>
          </div>
          <div class="col_3 no-border" style="border-right: 0px solid red">
            <div class="text-center">{{ itm.taxAmount }}</div>
          </div>
        </div>
      </div>
      <div class="div" style="border-top: #b15b16 1px solid">
        <div class="col_7 text-center">价税合计（大写）</div>
        <div class="no-border" style="margin-left: auto; padding-right: 40px">
          （小写）<span>￥{{ item.amountWithTax }}</span>
        </div>
      </div>
      <div class="div height84">
        <div class="col_1 no-border">销售方</div>
        <div class="col_15">
          <div>
            <span class="label">名称</span>：<span class="content">{{
              item.sellerName
            }}</span>
          </div>
          <div>
            <span class="label">纳税人识别号</span>：<span class="content">{{
              item.sellerTaxCode
            }}</span>
          </div>
          <div>
            <span class="label">地址及电话</span>：<span class="content">{{
              item.sellerAddressPhone
            }}</span>
          </div>
          <div>
            <span class="label">开户行及账号</span>：<span class="content">{{
              item.sellerBankAccount
            }}</span>
          </div>
        </div>
        <div class="col_1">备注</div>
        <div
          class="col_6"
          style="
            border-top: 1px solid #b15b16;
            border-left: 1px solid #b15b16;
            border-bottom: 1px solid #b15b16;
          "
        >
          {{ item.remark }}
        </div>
      </div>
    </div>

    <el-form>
      <el-form-item label="报销总额">
        <el-input   disabled v-model="total"></el-input>
      </el-form-item>
      <el-form-item label="申请事由">
        <el-input placeholder="请输入申请事由" v-model="subTitle"></el-input>
      </el-form-item>
      <el-form-item label="审批意见">
        <el-input placeholder="请输入审批意见" v-model="remark"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="success" @click="reject()">驳回</el-button>
        <el-button type="primary" @click="save()">通过</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElMessageBox } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
  name: "AddApprovalTask",
  components: { ElForm, ElMessage, ElMessageBox },
  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      title: "",
      subTitle:"",
      id: "",
      total:0,
      personnelType: "",
      list: [],
      remark: "",
      addApprovalTaskForm: {
        title: "",
        submitNumber: "",
        submitName: "",
        submitTime: "",
        type: "",
      },
      // 校验规则
      addApprovalTaskrules: {
        title: vxRule(true, null, "blur"),
        submitNumber: vxRule(true, null, "blur"),
        submitName: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getApprovalTaskById(id,subTitle) {
      httpService(
        "/javaApi/approvalInvoice/listByTaskId",
        { taskId: id },
        "get"
      ).then((data) => {
        this.total = 0;
        this.list = data;
        for(let i=0;i<this.list.length;i++){
          let item = this.list[i];
          this.total = this.total+ parseInt(item.amountWithTax)
        }
        this.id = id;
        this.subTitle = subTitle
      });
    },
    clear() {
      this.dialogFormVisible = false;
      this.remark = "";
      this.id="",
      //清空form
      this.addApprovalTaskForm.id = "";
      this.addApprovalTaskForm.title = "";
      this.addApprovalTaskForm.submitNumber = "";
      this.addApprovalTaskForm.submitName = "";
      this.addApprovalTaskForm.submitTime = "";
      this.addApprovalTaskForm.type = "";
    },
    reject() {
        if(this.remark==''){
            ElMessage.error("请输入审批意见");

            return;
        }
      ElMessageBox.confirm("确定要驳回报销吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new FormData();
          params.append("id", this.id);
          params.append("status", 2);
          params.append("remark", this.remark);
          httpService(
            "/javaApi/approvalTask/updateStatus",
            params,
            "post"
          ).then((data) => {
            if (data.code == 200) {
              this.clear();
              //刷新父组件的数据
              this.$parent.getApprovalTaskList();
            } else {
              ElMessage.error(data.message);
            }
          });
        })
        .catch(() => {});
    },
    save() {
      let params = new FormData();
      params.append("id", this.id);
      params.append("status", 1);
      params.append("remark", this.remark);
      params.append("title", this.subTitle);
      httpService("/javaApi/approvalTask/updateStatus", params, "post").then(
        (data) => {
          if (data.code == 200) {
            this.clear();
            //刷新父组件的数据
            this.$parent.getApprovalTaskList();
          } else {
            ElMessage.error(data.message);
          }
        }
      );
    },
  },
};
</script>
<style  scoped>
.text-center {
  text-align: center;
}
.no-border {
  border: 0px solid white;
}
.col_1 {
  width: 20px;
  padding: 4px;
  border-top: 1px solid #b16363;
  border-bottom: 1px solid #b16363;
  line-height: 30px;
}
.col_2 {
  width: 8.33%;
  border-right: 1px solid #b16363;
}
.col_3 {
  width: 12.5%;
  border-right: 1px solid #b16363;
}
.col_5 {
  width: 20.83%;
  border-right: 1px solid #b16363;
}
.col_6 {
  width: 28%;
  padding: 10px;
}
.col_7 {
  width: 220px;
  border-right: 1px solid #b16363;
  flex-shrink: 0;
  padding: 2px;
}
.col_8 {
  width: 33.33%;
}
.col_14 {
  width: 58.33%;
  border: 1px solid #b16363;
}
.col_15 {
  width: 62.5%;
  border: 1px solid #b15b16;
  padding: 10px;
}
.col_17 {
  width: 70.83%;
}
.col_18 {
  width: 75%;
}
.col_24 {
  width: 100%;
}
.ap-card {
  border-left: 1px solid #b16363;
  border-right: 1px solid #b16363;
  border-top: 1px solid #b16363;
  margin-bottom: 20px;
}
.title {
  font-size: 26px;
  color: #b16363;
  text-align: center;
  line-height: 86px;
}
.extra {
  color: #b15b16;
  padding: 10px;
}

.extra .content {
  color: #181818;
}
.height84 {
  height: 104px;
}
.row {
  border: 1px solid #b16363;
  border-bottom: none;
  color: #b15b16;
}
.row .content {
  color: #181818;
}
.last-row {
  color: #b15b16;
  border-top: 1px solid #b16363;
}
.last-row .content {
  color: #181818;
}

.label {
  width: 90px;
  display: inline-block;
  text-align-last: justify;
  text-align: justify;
}
.title-label {
  width: 60px;
}
.div {
  display: flex;
}
.item {
  text-align: center;
  color: #181818;
  padding: 4px 0;
}
.span {
  display: inline-block;
  padding: 8px;
  box-sizing: border-box;
  vertical-align: middle;
  border-left: 1px solid #b16363;
  height: 100%;
}
.span .text-center {
  text-align: center;
}
</style>